<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: #b6b6b6;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .indexShow{
            position: relative;
            width: 1083px;
            height: 350px;
            /*background-color: #3B79ED;*/
            margin: auto;

        }
        .indexShowleft{
            position: absolute;
            top: 45%;
            left: -5%;
            width: 28px;
            height: 28px;
            background: url("imgs/sl.png")  no-repeat;
            display: block;

        }
        .indexShowright{
            position: absolute;
            top: 45%;
            right: -5%;
            width: 28px;
            height: 28px;
            background: url("imgs/sr.png")  no-repeat;
            display: block;

        }
        .indexShowBox{
            width: 100%;
            height: 100%;
            /*background: #faa;*/
        }
        .indexShowBox > ul{
            width: 100%;
            height: 100%;
        }
        .indexShowBox li{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all .4s linear;
        }
        .indexShowBox a{
            width: 100%;
            height: 100%;
            display: block;
        }

    </style>
</head>
<body>
<div class="indexShow">
    <a href="#" class="indexShowleft" ></a>
    <a href="#" class="indexShowright"></a>
    <div class="indexShowBox">
        <ul class="indexShowUl">
            <li style="opacity: 1;z-index: 4;">
                <a href="#" class="img-link" >
                    <img src="imgs/pi.jpg" alt=""/>
                </a>
            </li>
            <li style="opacity: 0;z-index: 1;">
                <a href="#" class="img-link">
                    <img src="imgs/pi1.jpg" alt=""/>
                </a>
            </li>
            <li style="opacity: 0;z-index: 1;">
                <a href="#" class="img-link">
                    <img src="imgs/pi2.jpg" alt="" />
                </a>
            </li>
            <li style="opacity: 0;z-index: 1;">
                <a href="#" class="img-link">
                    <img src="imgs/pi3.jpg" alt="" />
                </a>
            </li>
        </ul>
    </div>
</div>

<script>
    window.onload=function() {
        var lilist = childNodesrun(document.getElementsByClassName("indexShowUl")[0].childNodes);
        var num = -1;
        var indexshowbox1 = document.getElementsByClassName("indexShowBox")[0],
                indexshowleft = document.getElementsByClassName("indexShowleft")[0],
                indexshowright = document.getElementsByClassName("indexShowright")[0],
                indexshow = document.getElementsByClassName('indexShow')[0];
        var setone = setInterval(setdo,3000);
        //自动循环
        function setdo(){
            if (num == 3){
                num =-1;
            }
            num++;
            console.log("后一个状态:"+num);
            for (var i = 0; i < lilist.length; i++){
                lilist[i].style.opacity = 0;
                lilist[i].style.zIndex = 1;
            }
            lilist[num].style.opacity = 1;
            lilist[num].style.zIndex = 4;

        }
         //移入 停止轮播
        //中间页面移入停止
        indexshowbox1.addEventListener("mouseover",mouseoverfun);
        //中间页面移出 继续执行
        indexshowbox1.addEventListener("mouseout",mouseoutfun);
        //左边按钮移入停止
        indexshowleft.addEventListener("mouseover",mouseoverfun);
        //左边按钮移出 继续执行
        indexshowleft.addEventListener("mouseout",mouseoutfun);
        //右边按钮移入停止
        indexshowright.addEventListener("mouseover",mouseoverfun);
        //右边按钮移出 继续执行
        indexshowright.addEventListener("mouseout",mouseoutfun);
        //左边按钮点击 执行上一张图片
        indexshowleft.addEventListener("click",indexshowleftDo);
        //左边按钮点击 执行下一张图片
        indexshowright.addEventListener("click",indexshowrightDo);
        function mouseoverfun(){
            console.log(setone);
            clearInterval(setone);
        }
        function mouseoutfun(){
            setone=setInterval(setdo,3000);}
        //点左边
        function indexshowleftDo(){
            clearInterval(setone);
                num=num-1;
            console.log("indexshowleftDo:"+num);
            if (num <0) {
                num =3;
                }
                for (var i = 0; i < lilist.length; i++) {
                    lilist[i].style.zIndex = 1;
                    lilist[i].style.opacity = 0;
                }
                lilist[num].style.zIndex = 4;
                lilist[num].style.opacity = 1;
        }
        //点击右边
        function indexshowrightDo(){
            clearInterval(setone);
            num=num+1;
            console.log("indexshowrightDo"+num);
            if (num > 3){
                num =0;
            }
            for (var i = 0; i < lilist.length; i++) {
                lilist[i].style.zIndex = 1;
                lilist[i].style.opacity = 0;
            }
            lilist[num].style.zIndex = 4;
            lilist[num].style.opacity = 1;
        }
        //取li,去掉其他的
        function childNodesrun(doc){
            var arry = [];
            for(var i = 0,j=0; i < doc.length ; i++){
                if(doc[i].nodeName != "#text"){
                    arry[j] = doc[i];
                    j++;
                }
            }
            return arry;
         }
    }



</script>
</body>
</html>